import React from "react";
import "./App.css";

class App extends React.Component {
    state = {
        action: false
    };

    aniRef = React.createRef();

    anim = null;

    move = () => {
        this.setState({
            action: true
        });
        const top = this.aniRef.current.style.top.slice(0, -2);
        this.anim = window.requestAnimationFrame(()=> this.animation(top));
    };

    animation = (top) => {
        console.log( Number(top) + 1 + 'px');
        this.aniRef.current.style.top = top + 1 + 'px';
        if (top <= 300) {
            this.anim = window.requestAnimationFrame(this.animation);
        }
    };

    stop = () => {
        window.cancelAnimationFrame(this.anim);
    };

    render() {
        const styles = {
            move: {
                transition: "top 2s linear",
                position: "absolute",
                top: 0
            },
            action: {
                top: 200
            }
        };
        const { action } = this.state;
        console.log("1");
        return (
            <div className='App'>
                <div
                    style={
                        action
                            ? { ...styles.move, ...styles.action }
                            : styles.move
                    }
                >
                    过渡
                </div>
                <div style={{ top: 0 }} ref={this.aniRef} className='animation'>
                    动画
                </div>
                <button onClick={this.move}>开始</button>
                <button onClick={this.stop}>停止</button>
            </div>
        );
    }
}

export default App;
